<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="会员卡设置"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :border="false">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="settingBox">
            <div class="settingBoxLeft">
              <div class="g-title">基本信息</div>
              <a-form-model-item label="小程序" prop="id">
                <a-select placeholder="请选择小程序" v-model="form.id" @change="init" allowClear>
                  <a-select-option :value="item.id" v-for="item of idList" :key="item.id">
                    {{ item.app_name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="卡名称" prop="card_show_name">
                <a-input :maxLength="10" v-model="form.card_show_name" allowClear />
              </a-form-model-item>
              <a-form-model-item label="logo设置" prop="logo_id">
                <cyyUploadImg
                  imgSizeText="建议尺寸：100*100"
                  @uploadSuccess="(e) => (form.logo_id = e.data)"
                  @deleteImg="form.logo_id = ''"
                  :imgSrc="form.logo_id"
                  :showSize="false"
                >
                </cyyUploadImg>
              </a-form-model-item>
              <a-form-model-item label="背景设置" prop="background_id">
                <cyyUploadImg
                  imgSizeText="建议尺寸：750*360"
                  @uploadSuccess="(e) => (form.background_id = e.data)"
                  @deleteImg="form.background_id = ''"
                  :imgSrc="form.background_id"
                  :showSize="false"
                >
                </cyyUploadImg>
              </a-form-model-item>
              <a-form-model-item label="是否显示积分" prop="column_info_list_point">
                <a-radio-group v-model="form.column_info_list_point">
                  <a-radio value="1"> 是 </a-radio>
                  <a-radio value="2"> 否 </a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item label="是否显示余额" prop="column_info_list_balance">
                <a-radio-group v-model="form.column_info_list_balance">
                  <a-radio value="1"> 是 </a-radio>
                  <a-radio value="2"> 否 </a-radio>
                </a-radio-group>
              </a-form-model-item>

              <a-form-model-item label="活动id">
                <a-input v-model="form.join_benefit_id"></a-input>

                <div class="">
                  扩展功能 入会有礼 专用。为入会有礼对应的活动 id（商家平台配置所得）。
                  <a
                    target="_blank"
                    :href="`https://b.alipay.com/page/mrchportalweb-vip-card/vip-card/base/card/basecard/manage?cardTemplateId=${template_id}`"
                    >{{
                      `https://b.alipay.com/page/mrchportalweb-vip-card/vip-card/base/card/basecard/manage?cardTemplateId=${template_id}`
                    }}</a
                  >
                </div>
              </a-form-model-item>
              <a-divider />

              <div class="g-title">栏位配置</div>

              <div class="formDes">
                <i>*</i>
                <div class="tit">设置显示几个快速链接：</div>
                <div class="form">
                  <a-radio-group v-model="form.num">
                    <a-radio :value="0"> 0个 </a-radio>
                    <a-radio :value="2"> 2个 </a-radio>
                    <a-radio :value="3"> 3个 </a-radio>
                  </a-radio-group>
                </div>
              </div>

              <div class="actionsList">
                <template v-for="(item, index) of form.card_action_list">
                  <div class="actionsItem" v-if="form.num > index" :key="index">
                    <!-- <div class="actionsItemLet">
                      <div class="actionsTit">设置项{{ ++index }}：</div>
                    </div> -->
                    <div class="actionsItemRig">
                      <div class="formDes">
                        <i>*</i>
                        <div class="tit">自定义名称：</div>
                        <div class="form">
                          <a-input :maxLength="6" v-model="item.title" allowClear />
                        </div>
                      </div>
                      <div class="formDes">
                        <i>*</i>
                        <div class="tit">自定义链接：</div>
                        <div class="form">
                          <a-input disabled class="inp" :value="item.url ? item.url.name : ''" />
                          <a-button class="btn" type="primary" @click="selectLike(item)">选择</a-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <a-divider />

              <div class="g-title">会员权益</div>
              <div class="formDes">
                <div class="form">
                  <a-input-search :maxLength="16" v-model="textValue3" @search="(e) => onSearch(e, 3)">
                    <a-button slot="enterButton" icon="plus"> </a-button>
                  </a-input-search>
                </div>
              </div>
              <div class="actionsList" v-if="form.template_benefit_info.length">
                <div class="actionsItem" v-for="(item, index) of form.template_benefit_info" :key="index">
                  <div class="actionsItemRig">
                    <div class="formDes">
                      <i>*</i>
                      <div class="tit">名称：</div>
                      <div class="form">
                        <div class="flex">
                          <a-input style="flex: 1" :maxLength="16" v-model="item.title" allowClear />
                        </div>
                        <div class="actionsItemRemove">
                          <a-button type="danger" @click="form.template_benefit_info.splice(index, 1)"> 删除 </a-button>
                        </div>
                      </div>
                    </div>
                    <div class="formDes">
                      <i class="s">*</i>
                      <div class="tit">描述：</div>
                      <div class="form">
                        <a-input type="textarea" :maxLength="1000" v-model="item.benefit_desc" allowClear />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <a-divider />

              <div class="g-title">开卡页面会员权益</div>
              <div class="formDes">
                <div class="form">
                  <a-input-search :maxLength="10" v-model="textValue2" @search="(e) => onSearch(e, 2)">
                    <a-button slot="enterButton" icon="plus"> </a-button>
                  </a-input-search>
                </div>
              </div>
              <div class="actionsList" v-if="form.open_card_conf_card_rights.length">
                <div class="actionsItem" v-for="(item, index) of form.open_card_conf_card_rights" :key="index">
                  <div class="actionsItemRig">
                    <div class="formDes">
                      <i>*</i>
                      <div class="tit">名称：</div>
                      <div class="form">
                        <div class="flex">
                          <a-input :maxLength="10" v-model="item.title" allowClear />
                        </div>
                        <div class="actionsItemRemove">
                          <a-button type="danger" @click="form.open_card_conf_card_rights.splice(index, 1)">
                            删除
                          </a-button>
                        </div>
                      </div>
                    </div>
                    <div class="formDes">
                      <i class="s">*</i>
                      <div class="tit">描述：</div>
                      <div class="form">
                        <a-input :maxLength="20" v-model="item.detail" allowClear />
                      </div>
                    </div>
                    <div class="formDes">
                      <i class="s">*</i>
                      <div class="tit">图标：</div>
                      <div class="form">
                        <cyyUploadImg
                          imgSizeText="建议尺寸：750*360"
                          @uploadSuccess="(e) => (item.logo_id = e.data)"
                          @deleteImg="item.logo_id = ''"
                          :imgSrc="item.logo_id"
                          :showSize="false"
                        >
                        </cyyUploadImg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <a-divider />

              <div class="g-title">卡行动点配置</div>
              <div class="formDes">
                <!-- <div class="tit">添加配置项：</div> -->
                <div class="form">
                  <a-input-search
                    :maxLength="16"
                    v-model="textValue"
                    placeholder="请输入设置项"
                    @search="(e) => onSearch(e, 1)"
                  >
                    <a-button slot="enterButton" icon="plus"> </a-button>
                  </a-input-search>
                </div>
              </div>
              <div class="actionsList" v-if="form.column_info_list.length">
                <div class="actionsItem" v-for="(item, index) of form.column_info_list" :key="index">
                  <!-- <div class="actionsItemLet">
                    <div class="actionsTit">设置项{{ index + 1 }}：</div>
                  </div> -->
                  <div class="actionsItemRig">
                    <div class="formDes">
                      <i>*</i>
                      <div class="tit">自定义名称：</div>
                      <div class="form">
                        <div class="flex">
                          <a-input :maxLength="16" v-model="item.title" allowClear />
                        </div>
                        <div class="actionsItemRemove">
                          <a-button type="danger" @click="form.column_info_list.splice(index, 1)"> 删除 </a-button>
                        </div>
                      </div>
                    </div>
                    <div class="formDes">
                      <i>*</i>
                      <div class="tit">自定义链接：</div>
                      <div class="form">
                        <a-input disabled class="inp" :value="item.url ? item.url.name : ''" />
                        <a-button class="btn" type="primary" @click="selectLike(item)">选择</a-button>
                      </div>
                    </div>
                    <div class="formDes">
                      <i class="s">*</i>
                      <div class="tit">自定义描述：</div>
                      <div class="form">
                        <a-input :maxLength="16" v-model="item.value" allowClear />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="settingBoxline"></div>
            <div class="settingBoxRigh">
              <div class="g-title">卡包列表预览(示例)</div>

              <div class="cardList">
                <div class="item">
                  <div class="itemCon">
                    <img class="cardBg" v-if="form.background_id" :src="form.background_id" alt="" />

                    <div class="img">
                      <a-avatar :size="42" :src="form.logo_id" />
                    </div>
                    <div class="con">
                      <div class="conHd">
                        <div class="name">{{ form.card_show_name }}</div>
                        <!-- <div class="tag">爱鲜活V1</div> -->
                      </div>

                      <div class="num" v-if="form.column_info_list_point === '1'">积分 35</div>

                      <!-- <div class="link">
                      <div class="linkItem">
                        <em>
                          领券
                          <i class="i i1"></i>
                          <i class="i i2"></i>
                        </em>
                        <div class="linkCon">
                          甄选牛奶优惠
                          <i class="iconfont icon-arrow-right"></i>
                        </div>
                      </div>
                      <div class="linkItem">
                        <div class="linkCon">
                          积分兑惊喜好礼
                          <i class="iconfont icon-arrow-right"></i>
                        </div>
                      </div>
                    </div> -->
                    </div>
                  </div>

                  <div class="fdLink" v-if="form.card_action_list.length && form.num">
                    <template v-for="(item, index) of form.card_action_list">
                      <div class="fdLinkItem" v-if="form.num > index" :key="index">
                        {{ item.title }}
                      </div>
                    </template>
                  </div>
                </div>
              </div>

              <div class="g-title detailInfo">详情页预览(示例)</div>

              <div class="cardInfo cardList">
                <div class="item">
                  <div class="itemCon">
                    <img class="cardBg" v-if="form.background_id" :src="form.background_id" alt="" />

                    <div class="img">
                      <a-avatar :size="34" :src="form.logo_id" />
                    </div>
                    <div class="con">
                      <div class="conHd">
                        <div class="name">{{ form.card_show_name }}</div>
                        <!-- <div class="tag">爱鲜活V1</div> -->
                      </div>

                      <!-- <div class="num">享会员专属权益</div> -->
                    </div>
                  </div>

                  <div class="cardInfoBox">
                    <div class="cardInfoBoxItem">
                      <div class="integral">
                        <img class="integralBg" src="../../../assets/images/vipNumberTop.png" alt="" />

                        <div class="integralIcon">
                          <i class="iconfont icon-QRcode"></i>
                        </div>

                        <div class="integralCon">
                          <div class="integralConItem" v-if="form.column_info_list_point === '1'">
                            <div class="integralTxt">积分</div>
                            <div class="integralNum">35</div>
                          </div>
                          <div class="integralConItem" v-if="form.column_info_list_balance === '1'">
                            <div class="integralTxt">余额</div>
                            <div class="integralNum">35</div>
                          </div>
                        </div>
                      </div>

                      <div class="fdLink" v-if="form.card_action_list.length && form.num">
                        <template v-for="(item, index) of form.card_action_list">
                          <div class="fdLinkItem" v-if="form.num > index" :key="index">
                            {{ item.title }}
                          </div>
                        </template>
                      </div>
                    </div>

                    <div class="cardInfoBoxItem">
                      <div class="cardInfoForm">
                        <div class="cardInfoInp">
                          <div class="let">我的权益</div>
                          <div class="rig">
                            <template v-for="(item, i) of form.template_benefit_info">
                              <span class="tag" v-if="i < 2" :key="i">
                                {{ item.title }}
                              </span>
                            </template>
                            <i class="iconfont icon-arrow-right"></i>
                          </div>
                        </div>
                      </div>

                      <!-- <div class="infoList" v-if="template_benefit_info.length">
                        <div class="infoItem" v-for="(item, index) of template_benefit_info" :key="index">
                          <div class="tit">{{ item.title }}</div>
                          <div class="des">{{ item.benefit_desc }}</div>
                        </div>
                      </div> -->

                      <!-- <div class="cardInfoForm">
                      <div class="cardInfoInp">
                        <div class="let">生活资讯号</div>
                        <div class="rig">
                          <em>鲜有时，爱无限！</em>
                          <i class="iconfont icon-arrow-right"></i>
                        </div>
                      </div>
                    </div> -->
                    </div>

                    <div class="cardInfoBoxItem" v-if="form.column_info_list.length">
                      <div class="cardInfoForm">
                        <div class="cardInfoInp" v-for="(item, index) of form.column_info_list" :key="index">
                          <div class="let">{{ item.title }}</div>
                          <div class="rig">
                            <em>{{ item.value }}</em>
                            <i class="iconfont icon-arrow-right"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-form-model>

        <div class="tac">
          <a-button class="btn" type="primary" :disabled="disabled" @click="onSubmit"> 提交 </a-button>
          <a-button class="btn" @click="$router.go(-1)"> 取消 </a-button>

          <div class="des">模版提交后有延迟时间</div>
        </div>
      </a-card>
    </page-header-wrapper>

    <select-link v-if="showLink" @onOk="onOk" @cancel="showLink = false" :isSingle="true"></select-link>
  </div>
</template>

<script>
import { cardTemplateCreate, cardTemplateInfo } from '@/api/marketing/activityNew'
import { cyyUploadImg } from '@/components/CyyUi/index'
import SelectLink from '@/components/DiyNew/SelectLink/index.vue'
import { alipayList } from '@/api/setting/applet'

export default {
  components: {
    cyyUploadImg,
    SelectLink,
  },

  data() {
    return {
      showLink: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      disabled: false,
      idList: [],
      form: {
        num: 0,
        id: '',
        card_id: '',
        card_action_list: [
          {
            title: '',
            url: null,
          },
          {
            title: '',
            url: null,
          },
          {
            title: '',
            url: null,
          },
        ],
        card_show_name: '自定义',
        logo_id: '',
        background_id: '',
        column_info_list_point: '1',
        column_info_list_balance: '1',
        column_info_list: [], // title、value、url
        join_benefit_id: '',
        template_benefit_info: [],
        open_card_conf_card_rights: [],
      },
      rules: {
        id: [{ required: true, message: '请选择小程序', trigger: 'blur' }],
        card_show_name: [{ required: true, message: '卡名称不能为空', trigger: 'blur' }],
        logo_id: [{ required: true, message: '请上传logo', trigger: 'change' }],
        background_id: [{ required: true, message: '请上传背景图片', trigger: 'change' }],
        column_info_list_point: [{ required: true, message: '请选择', trigger: 'change' }],
        column_info_list_balance: [{ required: true, message: '请选择', trigger: 'change' }],
      },

      item: null,

      textValue: '',
      textValue2: '',
      textValue3: '',

      // template_benefit_info: [],
      template_id: '',
    }
  },

  async mounted() {
    const hide = this.$message.loading('加载中', 0)
    let res = await alipayList()
    hide()
    if (!res.code && res.data.length) {
      this.idList = res.data
    }

    let { id } = this.$route.query
    this.form.id = id
    this.init()
  },

  watch: {},

  computed: {},

  methods: {
    selectLike(item) {
      this.item = item
      this.showLink = true
    },

    onOk(e) {
      this.showLink = false
      this.item.url = e
    },

    onSearch(e, type) {
      if (!e) {
        return this.$message.error('请输入有效内容～')
      }

      switch (type) {
        case 1:
          this.form.column_info_list.push({
            title: e,
            value: '',
            url: {},
          })

          this.textValue = ''
          break

        case 2:
          this.form.open_card_conf_card_rights.push({
            title: e,
            logo_id: '',
            detail: '',
          })
          this.textValue2 = ''
          break

        case 3:
          this.form.template_benefit_info.push({
            title: e,
            benefit_desc: '',
          })
          this.textValue3 = ''
          break
      }
    },

    async init() {
      if (!this.form.id) {
        return
      }
      const hide = this.$message.loading('加载中', 0)

      let res = await cardTemplateInfo(this.form.id),
        { form } = this
      if (!res.code && res.data) {
        let {
            background_id,
            card_action_list,
            card_show_name,
            column_info_list_balance,
            column_info_list_point,
            logo_id,
            id,
            join_benefit_id,
            template_benefit_info,
            open_card_conf_card_rights,
            column_info_list,
            template_id,
          } = res.data,
          max = 3

        form.card_action_list = card_action_list
        form.num = card_action_list.length
        form.card_id = id
        form.column_info_list = column_info_list
        form.card_show_name = card_show_name
        form.join_benefit_id = join_benefit_id
        form.background_id = background_id
        form.logo_id = logo_id
        form.column_info_list_balance = String(column_info_list_balance)
        form.column_info_list_point = String(column_info_list_point)
        form.template_benefit_info = template_benefit_info
        form.open_card_conf_card_rights = open_card_conf_card_rights || []
        this.template_id = template_id
        let num = max - card_action_list.length

        for (let i = 0; i < num; i++) {
          form.card_action_list.push({
            title: '',
            url: null,
          })
        }
      }
      hide()
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form)),
            start = 0,
            end = 0

          switch (form.num) {
            case 2:
              start = 2
              end = 1
              break

            case 0:
              start = 0
              end = 3
              break
          }

          form.card_action_list.splice(start, end)

          if (!form.card_action_list.every((el) => el.title && el.url)) {
            return this.$message.error('请完善配置项信息')
          }

          if (!form.template_benefit_info.every((el) => el.title)) {
            return this.$message.error('请完善会员权益')
          }

          if (!form.open_card_conf_card_rights.every((el) => el.title)) {
            return this.$message.error('请完善开卡页面会员权益')
          }

          if (!form.column_info_list.every((el) => el.title && el.url)) {
            return this.$message.error('请完善自定义设置信息')
          }

          this.disabled = true
          const hide = this.$message.loading('加载中', 0),
            res = await cardTemplateCreate(form)

          hide()
          this.disabled = false

          if (res.code == 0) {
            this.$message.success('操作成功！')
            //   this.$router.back()
            return
          }
          this.$message.error(res.msg)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>

<style lang="less" scoped>
.g-title {
  padding-bottom: 20px;
  font-size: 16px;
  color: #000;
}

.settingBox {
  position: relative;
  display: flex;

  .settingBoxline {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: #e8e8e8;
    }
  }

  .settingBoxLeft {
    flex: 1;
    overflow: hidden;
    padding-right: 24px;
  }

  .settingBoxRigh {
    padding: 0 44px;
    width: 547px;
    overflow: hidden;
  }
}

.formDes {
  display: flex;
  align-items: center;
  padding-bottom: 24px;

  .tit {
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
  }

  i {
    margin-right: 4px;
    font-style: normal;
    color: #f5222d;
    &.s {
      opacity: 0;
    }
  }
}

.actionsTit {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}

.actionsItem {
  margin-bottom: 24px;
  display: flex;
}

.actionsItemRig {
  padding: 16px 17px 0 14px;
  flex: 1;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.formDes {
  .form {
    display: flex;
    flex: 1;

    .inp {
      flex: 1;
      overflow: hidden;
    }

    .btn {
      margin-left: 10px;
    }
  }
}

.cardList {
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.16);

  .item {
    position: relative;
    padding: 0 12px 40px;
    height: 160px;
    border-radius: 10px;
    background: #1f66b2;
    color: #fff;
  }

  .fdLink {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    border-radius: 0px 0px 10px 10px;
    background: rgba(0, 0, 0, 0.3);

    .fdLinkItem {
      position: relative;
      flex: 1;
      padding: 0 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 40px;
      font-size: 16px;
      text-align: center;
      line-height: 40px;

      &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 12px;
        bottom: 12px;
        width: 1px;
        background: #587ba0;
      }

      &:last-of-type:after {
        display: none;
      }
    }
  }

  .img {
    margin-right: 24px;
  }

  .itemCon {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .num {
    margin-bottom: 9px;
  }

  .con {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow: hidden;
  }

  .conHd {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
    width: 100%;

    .name {
      margin-right: 7px;
      font-size: 16px;
      font-weight: bold;
    }

    .tag {
      padding: 1px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
    }
  }

  .link {
    display: flex;
    flex-wrap: wrap;

    .linkItem {
      position: relative;
      display: flex;
      align-items: center;
      margin-right: 12px;
      height: 21px;
      background: linear-gradient(90deg, #fee9b1 0%, #fed89e 100%);
      border-radius: 3px;
      font-size: 12px;
      color: #333;

      em {
        position: relative;
        padding: 0 5px;
        font-style: normal;

        &:after {
          content: '';
          position: absolute;
          top: 5px;
          bottom: 5px;
          right: 0;
          border-left: 1px dotted #1759a3;
        }

        .i {
          position: absolute;
          right: -2px;
          width: 5px;
          height: 5px;
          border-radius: 32px;
          background: #1f66b2;
        }

        .i1 {
          top: -5px;
        }

        .i2 {
          bottom: -4px;
        }
      }

      .linkCon {
        display: flex;
        align-items: center;
        padding: 0 9px 0 7px;

        .icon-arrow-right {
          margin-left: 4px;
        }
      }
    }
  }
}

.detailInfo {
  margin-top: 60px;
}

.cardInfo {
  background: #f6f6f6;

  .item {
    height: auto;
    background: none;
    padding-bottom: 0;
  }

  .itemCon {
    position: relative;
    background: #1f66b2;
    margin: 0 -12px;
    padding: 18px 16px 100px;
    border-radius: 10px 10px 0 0;
  }

  .img {
    position: relative;
    z-index: 3;
    margin-right: 11px;
  }
}

.cardInfoBox {
  margin: 0 -12px;
  color: #242427;

  .fdLink {
    position: static;
    margin: 0 16px 12px;
    background: none;
    border: 1px solid #f2dcc7;
    color: #e1963f;
    width: auto;
    border-radius: 5px;

    .fdLinkItem {
      &:after {
        background: #f2dcc7;
      }
    }
  }

  .cardInfoBoxItem {
    margin-bottom: 12px;
    background: #fff;
    border-radius: 10px;
    // overflow: hidden;

    &:after {
      content: '';
      clear: both;
      display: block;
      height: 1px;
      visibility: hidden;
    }

    &:last-of-type {
      margin-bottom: 0;
    }

    &:first-of-type {
      border-radius: 0 0 10px 10px;
    }
  }
}

.integral {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.integralIcon {
  display: flex;
  z-index: 2;
  align-items: center;
  justify-content: center;
  margin: -10px 0 18px;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: #000;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

  .icon-QRcode {
    position: relative;
    z-index: 2;
    font-size: 24px;
    color: #fff;
  }
}

.integralBg {
  position: absolute;
  left: 50%;
  top: -20px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.integralCon {
  display: flex;
  width: 100%;

  .integralConItem {
    flex: 1;
    overflow: hidden;
    text-align: center;
  }
}

.integralTxt {
  font-size: 15px;
  color: #323232;
}

.integralNum {
  padding-bottom: 13px;
  font-size: 20px;
  font-weight: bold;
  color: #323232;
}

.cardInfoForm {
  padding: 0 12px;
}

.cardInfoInp {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }

  .let {
    flex: 1;
    overflow: hidden;
    font-size: 15px;
    font-weight: bold;
    color: #242427;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rig {
    font-size: 14px;
    color: #999;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .tag {
      display: inline-block;
      margin: 0 2px;
      padding: 0 4px;
      border: 1px solid #f2dcc7;
      color: #e1963f;
      font-size: 12px;
      border-radius: 4px;
    }

    em {
      font-style: normal;
    }

    .i {
      color: #888;
    }
  }
}

.infoList {
  display: flex;

  .infoItem {
    text-align: center;
    flex: 1;
  }

  .tit {
    font-size: 14px;
    color: #242427;
  }

  .des {
    font-size: 12px;
    color: #999;
  }
}

.cardBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.por {
  position: relative;
}

.cardInfo {
  .cardBg {
    border-radius: 10px 10px 0 0;
  }
}

.actionsItemRemove {
  margin-left: 10px;
}

.tac {
  padding-top: 10px;
  text-align: center;

  .btn {
    margin: 0 4px;
  }

  .des {
    padding-top: 10px;
    color: #ff0000;
  }
}

.mTs {
  line-height: 1.5;
}

.flex {
  display: flex;
  width: 100%;
}
</style>
